<template>
  <div class="forget-wrap">
    <div class="bg-box">
      <img src="./logo.png" class="logo" onclick="return false"/>
      <div class="title">蓝聘</div>
      <div class="tab-box">
        <div class="btn forget">忘记密码</div>
      </div>
    </div>

    <!--忘记密码-->
    <div class="forget-box">
      <div class="wrap-box">
        <div class="icon1"><img src="../../images/phone.png" class="phone1" onclick="return false"/></div>
        <div class="input-box"><input type="text" class="phone2" placeholder="请输入手机号码" maxlength="11" v-model="phone"
                                      v-on:input="checkIcon" @blur="inputBlur"/></div>
        <div class="icon2" v-if="showIcon"><img src="../../images/icon_1.png" class="phone3" onclick="return false"/></div>
        <div class="icon2" v-if="hideIcon"><img src="../../images/icon_2.png" class="phone3" onclick="return false"/></div>
      </div>
      <div class="wrap-box">
        <div class="icon3"><img src="../../images/pwd.png" class="pwd1" onclick="return false"/></div>
        <div class="pwd-box"><input :type="pwdType1" class="pwd2" placeholder="请输入6-16位密码" maxlength="16"
                                    v-model="pwd1" @blur="inputBlur"/></div>
        <div class="icon4" @click="changeType1"><img :src=pwdIcon1 class="pwd3" onclick="return false"/></div>
      </div>
      <div class="wrap-box">
        <div class="icon3"><img src="../../images/pwd.png" class="pwd1" onclick="return false"/></div>
        <div class="pwd-box"><input :type="pwdType2" class="pwd2" placeholder="请再次输入6-16位密码" maxlength="16"
                                    v-model="pwd2" @blur="inputBlur"/>
        </div>
        <div class="icon4" @click="changeType2"><img :src=pwdIcon2 class="pwd3" onclick="return false"/></div>
      </div>
      <div class="wrap-box distance">
        <div class="icon3"><img src="../../images/code.png" class="pwd1" onclick="return false"/></div>
        <div class="code-box"><input type="text" class="code" placeholder="请输入验证码" maxlength="6" v-model="codeNum"
                                     @blur="inputBlur"/>
        </div>
        <div class="icon5">
          <timer-btn ref="timerBtn" class="btn" v-on:run="sendCode"></timer-btn>
        </div>
      </div>
      <div class="btn-box">
        <button type="button" class="sure" @click="findPwd">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5'
  import code from '../../components/code/code'
  import {baseUrl, salt} from "../../common/js/env"

  export default {
    data() {
      return {
        phone: "",
        pwd1: "",
        pwd2: "",
        codeNum: "",
        token1: "",
        token2:"",
        showIcon: false,
        hideIcon: false,
        pwdType1: "password",
        pwdType2: "password",
        pwdIcon1: require("../../images/icon_4.png"),
        pwdIcon2: require("../../images/icon_4.png")
      }
    },
    methods: {
      checkIcon() {
        let phone = this.phone;
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(phone.trim())) {
          this.showIcon = false;
          this.hideIcon = true;
        } else {
          this.showIcon = true;
          this.hideIcon = false;
        }
      },
      changeType1() {
        this.pwdType1 = this.pwdType1 === 'password' ? 'text' : 'password';
        this.pwdIcon1 = this.pwdIcon1 == require("../../images/icon_3.png") ? require("../../images/icon_4.png") : require("../../images/icon_3.png");
      },
      changeType2() {
        this.pwdType2 = this.pwdType2 === 'password' ? 'text' : 'password';
        this.pwdIcon2 = this.pwdIcon2 == require("../../images/icon_3.png") ? require("../../images/icon_4.png") : require("../../images/icon_3.png");
      },
      checkPwd() {//校验密码
        let pwd = this.pwd1;
        if (pwd == "" || pwd == undefined) {
          this.$vux.toast.text("密码不能为空", "middle");
          return;
        } else if (pwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(pwd)) {
          this.$vux.toast.text("密码不能包含中文", "middle");
          return;
        } else if (pwd.length < 6 || pwd.length > 16) {
          this.$vux.toast.text("密码长度为6-16位", "middle");
          return;
        }
        return true;
      },
      checkConfirmPwd() {//确认密码
        let pwd2 = this.pwd2;
        if (pwd2 == "" || pwd2 == undefined) {
          this.$vux.toast.text("确认密码不能为空", "middle");
          return;
        } else if (pwd2.indexOf(" ") >= 0) {
          this.$vux.toast.text("确认密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(pwd2)) {
          this.$vux.toast.text("确认密码不能包含中文", "middle");
          return;
        } else if (this.pwd1 != pwd2) {
          this.$vux.toast.text("密码不一致", "middle");
          return;
        } else if (pwd2.length < 6 || pwd2.length > 16) {
          this.$vux.toast.text("确认密码长度为6-16位", "middle");
          return;
        }
        return true;
      },
      checkPhone() {//校验手机号码
        let phone = this.phone;
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //手机号码正则表达式
        if (phone == "") {
          this.$vux.toast.text("手机号码不能为空", "middle");
          return;
        }
        if (!reg.test(phone)) {
          this.$vux.toast.text("手机号码格式错误", "middle");
          return;
        }
        return true;
      },
      checkCode() {
        let reg = /^[0-9]*$/; //验证数字
        let code = this.codeNum;
        if (code == "") {
          this.$vux.toast.text("验证码不能为空", "middle");
          return;
        } else if (!reg.test(code)) {
          this.$vux.toast.text("验证码格式不正确", "middle");
          return;
        }
        return true;
      },
      sendCode() {//获取验证码
        let phone = this.phone;
        if (this.checkPhone() && this.checkPwd() && this.checkConfirmPwd()) {
          this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
          this.axios.get(baseUrl + "/login/get_token?phone=" + phone + "&i=1").then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0 && resultObj.data != null) {
              this.token1 = resultObj.data;
              this.axios.get(baseUrl + "/login/send_code?phone=" + phone + "&i=1" + "&userToken=" + this.token1).then((res) => {
                let resultObj = res.data;
                if (resultObj.code == 0) {
                  this.token2 = resultObj.data;
                  this.$refs.timerBtn.start(); //启动倒计时
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  this.$refs.timerBtn.stop();
                }
              }).catch(function (error) {
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(function (error) {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      findPwd() {//确认
        let phone = this.phone;
        let pwd1 = this.pwd1;
        let code = this.codeNum;
        if (this.checkPhone() && this.checkPwd() && this.checkConfirmPwd() && this.checkCode()) {
          //校验验证码
          this.axios.get(baseUrl + "/login/mate_code?phone=" + phone + "&i=1&code=" + code + "&token=" + this.token2).then((res) => {
            let mateObj = res.data;
            if (mateObj.code == 0) {
              //忘记密码
              this.$vux.loading.show({
                text: '加载中',
              })
              let data = {"phone": phone, "password": md5(md5(pwd1) + salt)};
              this.axios.post(baseUrl + "/login/set_psw", data).then((res) => {
                let resultObj = res.data;
                this.$vux.loading.hide();
                if (resultObj.code == 0 && resultObj.data == 1) {
                  this.$vux.toast.text("密码修改成功", "middle");
                  this.$router.push('/login');
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  return;
                }
              }).catch(() => {
                this.$vux.loading.hide();
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(mateObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      backPage() {
        this.$router.push('/login');
      },
      inputBlur() {
        window.scrollTo(0, 0)
      }
    },
    components: {
      "timer-btn": code
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .forget-wrap
    wh(100%, 100%)
    overflow: hidden
    .bg-box
      display: flex
      flex-direction: column
      position: relative
      wh(100%, 4.72rem)
      bg-image("./bg.png", 100%, 100%)
      .logo
        margin: 0 auto
        padding-top: 1.267rem
        wh(1rem, 1rem)
      .title
        text-align: center
        margin-top: 0.133rem
        size-color(0.507rem, $color)
        font-weight: bold
      .tab-box
        display: flex
        justify-content: center
        position: absolute
        bottom: -0.373rem
        width: 100%
        .btn
          wh(2.667rem, 0.827rem)
          box-shadow: 0rem 0.013rem 0.107rem 0rem #025C9B
          border-radius(0.413rem)
          font-size: 0.44rem
          text-align: center
          line-height: 0.827rem
        .forget
          color: rgba(255, 255, 255, 1)
          background: linear-gradient(-90deg, rgba(165, 130, 255, 1), rgba(60, 175, 255, 1))
    .forget-box
      width: 100%
      margin-top: 0.8rem
      .wrap-box
        display: flex
        align-items: center
        margin: 0 auto
        wh(82.67%, 1.133rem)
        border-bottom: 0.013rem solid rgba(230, 230, 230, 1)
        margin-bottom: 0.547rem
        .icon1
          width: 0.787rem
          .phone1
            wh(0.413rem, 0.493rem)
        .icon3
          width: 0.787rem
          .pwd1
            wh(0.413rem, 0.493rem)
        .input-box
          width: auto
          .phone2
            wh(100%, 100%)
            size-color(0.4rem, rgba(169, 169, 169, 1))
        .pwd-box
          width: auto
          .pwd2
            wh(100%, 100%)
            size-color(0.4rem, rgba(169, 169, 169, 1))
        .icon2
          wh(0.533rem, 0.533rem)
          margin-left: auto
          .phone3
            wh(100%, 100%)
        .icon4
          wh(0.573rem, 0.413rem)
          margin-left: auto
          .pwd3
            wh(100%, 100%)
        .code-box
          width: auto
          .code
            wh(100%, 100%)
            size-color(0.4rem, rgba(169, 169, 169, 1))
        .icon5
          wh(auto, 0.4rem)
          margin-left: auto
          font-size: 0.4rem
          .btn
            line-height: 0.4rem
            text-align: center
            color: rgba(60, 175, 255, 1)
            background: #FFF

      .distance
        margin-bottom: 1.547rem
      .btn-box
        text-align: center
        wh(100%, 1.333rem)
        .sure
          wh(82.67%, 1.333rem)
          line-height: 1.333rem
          background: rgba(60, 175, 255, 1)
          border-radius(0.107rem)
          size-color(0.48rem, rgba(255, 255, 255, 1))
</style>
